A Bar chart using the CSV reader

Note: For browser security reasons the AJAX demos don't work offline. You can view the demos on the RGraph website here: /index.html

This goes in the documents header:

<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.csv.js"></script>
<script src="RGraph.bar.js"></script>

Put this where you want the chart to show up:

<canvas id="cvs" width="600" height="250">
    [No canvas support]
</canvas>

<div id="klkl" style="display: none">
    Richard,8,4,7,6,5,3,4
    Dave,7,4,6,9,5,8,7
    Luis,4,3,5,2,6,5,4
    Kevin,4,2,8,9,6,7,3
    Joel,4,5,1,3,5,8,6
    Pete,4,5,6,3,5,8,6
</div>

This is the code that generates the chart:

<script>
    window.onload = function ()
    {
        new RGraph.CSV('id:klkl', function (csv)
        //new RGraph.CSV('/sample.csv', function (csv) // You could use a file instead if you want to
        {
            /**
            * Fetch the first row of the CSV file, starting at the second column
            */
            var data = csv.getRow(0, 1);
            
            /**
            * Fetch the first column which become the labels
            */
            var labels = csv.getCol(0)
                labels.push('Fred')



            var bar = new RGraph.Bar({
                id: 'cvs',
                data: data,
                options: {
                    labels: labels,
                    labelsAboveSpecific: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
                    labelsAboveSize: 8,
                    noxaxis: true,
                    shadowOffsetx: 2,
                    shadowOffsety: 2,
                    shadowBlur: 5,
                    hmargin: 15,
                    backgroundGridAutofitNumvlines: 7,
                    colors: ['Gradient(#DDF:#01B4FF)'],
                    linewidth: 2,
                    strokestyle: 'white',
                    textAccessible: true
                }                    
            }).draw();
        });
    };
</script>